<template>
  <div class="todo-item">
    <input type="checkbox" v-model="completed" @change="toggleCompletion" />
    <span :class="{ completed: completed }">{{ title }}</span>
    <button @click="removeTodo">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    completed: Boolean,
  },
  methods: {
    toggleCompletion() {
      this.$emit("update:completed", !this.completed);
    },
    removeTodo() {
      this.$emit("remove-todo");
    },
  },
};
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
}

.completed {
  text-decoration: line-through;
}
</style>
